
<style>
    .summary{
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="message-app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
            <a v-show="!show.edit" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="show.edit = false">关闭</a>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label>类型：</label>
                <select class="form-control" v-model="page.message_type">
                    <option :value="0">全部…</option>
                    <option :value="1">系统</option>
                    <option :value="2">活动</option>
                </select>
            </div>
        </div>

    </div>

    <div class="row" v-show="!show.edit">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>内容</th>
                    <th>时间</th>
                    <th>类型</th>
                    <th>分类</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td><div class="summary" :title="item.content">{{item.content}}</div></td>
                    <td>{{item.created | TimeFormat}}</td>
                    <td>{{item.type | TypeName}}</td>
                    <td>{{item.message_type | MessageTypeName}}</td>
                    <td>
                        <a class="btn btn-info btn-xs" @click="edit(item)">编辑</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="pageLast" :value="page.page" @turn="turn"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-8 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">

                <div class="form-group" >
                    <label>标题：</label>
                    <input class="form-control" v-model="temp.title" maxlength="32">
                </div>

                <div class="form-group" >
                    <label>内容：</label>
                    <textarea class="form-control" v-model="temp.content"></textarea>
                </div>

                <div class="form-group">
                    <label>链接类型：</label>
                    <select class="form-control" v-model="temp.extras.linkType">
                        <option v-for="(t,i) in MessageLink" :value="i">{{t}}</option>
                    </select>
                </div>

                <div class="form-group" v-show="temp.extras.linkType > 0">
                    <label>链接内容：</label>
                    <input class="form-control" v-model="temp.extras.linkId">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                </div>
            </div>
        </div>
    </div>


</section>

<script>
    function Message() {
        this.userid = 0;
        this.title = '';
        this.content = '';
        this.type = 2;
        this.message_type = 2;
        this.extras = {
            linkType: 0,
            linkId: ''
        }
    }

    var messageApp = new Vue({
        el: '#message-app',
        data: {
            list: [],
            page: {
                page: 1,
                rows: 10,
                message_type: 0
            },
            pageLast: 0,
            listLoading: false,
            temp: new Message(),
            saveUploading: false,
            show: {
                edit: false
            }
        },
        mounted: function () {
            this.getList();
            ajax({
                uri: '/common/link_types',
                success: function (resp) {
                    this.MessageLink = resp.data;
                }.bind(this)
            })
        },
        methods: {
            getList: function () {
                if (this.listLoading) return;
                this.listLoading = true;
                ajax({
                    uri: '/message',
                    type: AJAX_CONST.GET,
                    data: this.page,
                    success: function (resp) {
                        this.list = resp.data;
                        this.pageLast = resp.last_page;
                        this.listLoading = false;
                    }.bind(this)
                })
            },
            add: function () {
                this.temp = new Message();
                this.show.edit = true;
            },
            edit: function (item) {
                if (!item.extras) {
                    item.extras = {
                        linkType: 0,
                        linkId: ''
                    }
                }
                this.temp = Object.assign(new Message(), item);
                this.show.edit = true;
            },
            save: function () {
                if (this.saveUploading) return;
                this.saveUploading = true;
                ajax({
                    uri: '/message',
                    type: AJAX_CONST.POST,
                    data: this.temp,
                    success: function (resp) {
                        this.saveUploading = false;
                        this.getList();
                    }.bind(this)
                })
            },
            del: function (item) {
                if (this.saveUploading) return;
                this.saveUploading = true;
                ajax({
                    uri: '/message',
                    type: AJAX_CONST.DELETE,
                    data: {id: item.id},
                    success: function (resp) {
                        this.saveUploading = false;
                        this.getList();
                    }.bind(this)
                })
            },
            turn: function (page) {
                this.page.page = page;
                this.getList();
            }
        },
        watch: {
            'page.message_type': function (nv, ov) {
                this.page.page = 1;
                this.getList();
            }
        },
        filters: {
            TypeName: function (type) {
                return 1==type ? '个人' : '公共';
            },
            MessageTypeName: function (type) {
                return 1==type ? '系统' : '活动'
            }
        }
    })
</script>